<template>
    <div class="wrapper">
        <swiper :options="swiperOption" >
            <swiper-slide v-for='item in list' :key='item.id'><img
                    class="swiper-img"
                   :src="item.imgUrl"
                    alt=""
            /></swiper-slide>
            <!-- Optional controls -->
            <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
    </div>
</template>

<script>
export default {
    name: "HomeSwiper",
    props: {
        list:Array
    },
    data() {
        return {
            swiperOption: {
                pagination: ".swiper-pagination",
                loop: true,
                initialSlide: 1,
                autoplay: 3000
            },
        }
    },
};
</script>

<style scoped>
    .swiper-pagination-bullet-active{
        background: #fff;
    }
    .swiper-img {
        width: 100%;
    }
    .wrapper{
        width: 100%;
        height: 0;
        overflow: hidden;
        padding-bottom: 31.25%;
        background: #eee;
    }
</style>